<template>
<el-container>
    <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"> <img class="header_icon" src="@/assets/favicon.webp" alt="首页">资源站</el-menu-item>
            <el-menu-item  index="2">下载游戏</el-menu-item>
            <el-menu-item index="3">游戏标签</el-menu-item>
            <el-menu-item index="4" @click="toHelp">帮助文档</el-menu-item>
            <el-menu-item index="5" style="float:right">搜索</el-menu-item>
            <el-menu-item index="6" style="float:right">注册</el-menu-item>
            <el-menu-item index="7" style="float:right">登录</el-menu-item>
        </el-menu>
    </el-header>
    <el-main>
        <div class="carousel" >
            <el-carousel :interval="2000" type="card" height="250px">
                <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
            </el-carousel>
        </div>
        <div class="source" >
            <el-row :gutter="30" style="align-items: center;">
                <el-col :span="250"  v-for="(item,index) in 12" :key="index"><div class="grid-content bg-purple">{{item}}</div></el-col>
            </el-row>
        </div>
        <div class="pagination">
           <pagination></pagination>
        </div>
    </el-main>

    <el-footer>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">资源站</el-menu-item>
            <el-menu-item index="2" style="display: flex;justify-content:center">使用指南</el-menu-item>
            <el-menu-item index="3" style="display: flex;justify-content:center">导航页面</el-menu-item>
            <el-menu-item index="4" style="display: flex;justify-content:center">友情链接</el-menu-item>
            <el-menu-item index="5" style="display: flex;justify-content:center">GitHub</el-menu-item>
            <el-menu-item index="6" style="display: flex;justify-content:right">联系我们</el-menu-item>
        </el-menu>
    </el-footer>
</el-container>
</template>

<script>
import pagination from './pagination.vue';
  export default {
  components: { pagination },
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      toHelp(){
        this.$router.push({path:'/helpPage'},()=>{});
      }
    }
  }
</script>

<style>

.pagination{
    text-align: center;
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.header_icon{
    margin-right:20px;
}

  .el-row {
    margin:0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .el-col {
    border-radius: 4px;
    margin-bottom:30px;
    align-content:center;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 25px;
    min-height: 36px;
    height:300px;
    width:250px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  .grid-content:hover{
    -webkit-transform:scale(1.15);
    -moz-transform:scale(1.15);
    -o-transform:scale(1.15);
    transform:scale(1.15);
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>